<template>
  <div>
    <el-container>
      <el-header>
        <div class="logo">
          <img src="../../assets/logo.png" alt="" />
          <span>{{ users.username }}的个人博客</span>
        </div>

        <div class="nav">
          <span>博客首页</span>
          <span>技术博客</span>
          <span>生活日志</span>
          <span>留言</span>
          <span>关于我</span>
          <span>
            <i class="el-icon-zoom-in"></i>
          </span>

          <span @click="$router.push('/login')" v-if="!this.$store.state.token">
            登录
          </span>
          <span @click="$router.push('/admin/users/personal')" v-else
            >作者中心</span
          >
        </div>
      </el-header>
      <!-- 主体 -->
      <el-main>
        <el-row>
          <el-col :span="15">
            <el-carousel height="250px" :autoplay="true" loop>
              <el-carousel-item v-for="(item, index) in bannerImg" :key="index">
                <img :src="item.img" alt="" />
              </el-carousel-item>
            </el-carousel>
          </el-col>
          <el-col :span="7" :offset="1">
            <div class="decx">
              <h4>个人简介</h4>
              <span>用户名：{{ users.username }}</span>
              <span class="userdecx"> 简介：{{ users.desc }} </span>
              <span> phone：{{ users.phone }} </span>
              <span> Email： {{ users.email }}</span>
            </div>
          </el-col>
        </el-row>

        <!-- 内容区 -->
        <el-row class="textContent">
          <el-col
            class="col"
            :span="15"
            v-for="(item, index) in articles"
            :key="index"
          >
            <el-card class="card" shadow="hover">
              <div class="content">
                <div :class="[item.articleImg ? text : text1]">
                  <span class="title" @click="goTextInfo(item.id)">{{
                    item.title
                  }}</span>
                  <p v-html="item.content"></p>
                  <div class="userInfo">
                    <span>{{ item.author }}</span>
                    <span class="el-icon-date">{{ item.createTime }}</span>
                    <span class="el-icon-chat-dot-square">{{
                      item.comment
                    }}</span>
                    <span class="el-icon-thumb">{{ item.star }}</span>
                    <span class="el-icon-view">{{ item.read }}</span>
                  </div>
                </div>
                <div
                  class="img"
                  @click="goTextInfo(item.id)"
                  v-if="item.articleImg"
                >
                  <img :src="item.articleImg" alt="" />
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="7" :offset="1">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>|</span>
                <span>阅读排行</span>
              </div>
              <!-- 文章观看排行列表 -->
              <!-- 子组件调用父组件的方法 -->
              <articleList @goTextInfo="goTextInfo" :articleList="viewsArticle"></articleList>
            </el-card>
          </el-col>
        </el-row>

        <!-- 分页 -->
        <el-row class="fenye">
          <el-col :span="15">
            <el-pagination
              background
              layout="prev, pager, next"
              :total="count"
              :page-size="pageSize"
              :current-page="page"
              @current-change="changePage"
            >
            </el-pagination>
          </el-col>
        </el-row>
      </el-main>
      <el-footer>
        <div class="footerInfo">
          <span> COPYRIGHT 2017 个人博客. ALL RIGHTS RESERVED.</span>
          <span
            >本站只提供WEB服务,如有侵犯您的权益,请发送邮件至作者邮箱，我们会及时处理</span
          >
        </div>
      </el-footer>
    </el-container>
  </div>
</template>
<script>
import { getAllWebArticles, getAllWebViewArticles } from "@/api/article";
import { getBanner } from "@/api/web";
import articleList from "./components/articleList.vue";
export default {
  components: {
    articleList,
  },
  data() {
    return {
      users: {
        username: "游客",
        desc: "",
        phone: "",
        email: "",
      },
      articles: [],
      page: 0,
      pageSize: 0,
      count: 0,
      bannerImg: [],
      // 判断是否有图片所展现的不同样式
      text: "text",
      text1: "text1",
      viewsArticle: [],
    };
  },
  created() {
    this.users = this.$store.state.user || this.users;
    this.getData();
    this.getViewData();
    this.getBanner();
  },
  methods: {
    async getData() {
      let { data } = await getAllWebArticles({ page: this.page });
      this.articles = data.result;
      this.pageSize = data.pagesize;
      this.count = data.count;
    },

    //  获取浏览排行榜
    async getViewData() {
      let { data } = await getAllWebViewArticles({ page: 1 });
      this.viewsArticle = data.result.splice(0,5)
      console.log(this.viewsArticle);
    },

    // 获取轮播图
    async getBanner() {
      const { data } = await getBanner();
      const result = data.result;
      this.bannerImg = result;
    },

    //跳转到文章详情页
    goTextInfo(id) {
      this.$router.push({
        path: "/web/articleInfo",
        query: {
          id: id,
        },
      });
    },

    //  分页
    changePage(page) {
      this.page = page;
      this.getData();
    },
  },
};
</script>

<style  scoped src='./style/web.css'>
</style>